<!--The content below is only a placeholder and can be replaced.
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <img width="300" src="">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>
-->

<div class="main">
	<div class="ops">
		<div class="switch"  *ngIf="mode=='table'" (click)="onToggle()">图</div>
		<div class="switch"  *ngIf="mode=='diagram'" (click)="onToggle()">表</div>
		<div class="coors">
			<div class="coorX">
			
			 <ng-container *ngFor="let item of coordDate;let index = index;">
			     <div class="{{selectedCoordDate===item?'coordinate-selected':''}} coordinate"
			         (click)="onChangeCoordDate(item)"
			     >{{item.label}}</div>
			 </ng-container>

			</div>
			<div class="coorY">
			
             <ng-container *ngFor="let item of coordTime;let index = index;">
                 <div class="{{selectedCoordTime===item?'coordinate-selected':''}} coordinate"
                     (click)="onChangeCoordTime(item)"
                 >{{item.label}}</div>
             </ng-container>
			</div>
		</div>
	</div>
	<div class="statTable" *ngIf="mode=='table'">
		<table>
			<thead>
				<tr>
					<th>{{this.selectedCoordDate.label}}</th>
					<th>{{this.selectedCoordTime.label}}</th>
					<th>峰值</th>
				</tr>
			</thead>
			<tbody>

					<ng-container *ngFor="let item of this.tableData;let index = index;">

						<tr>

							<td>{{item.C1}}</td>
							<td>{{item.C2}}</td>
							<td>{{item.C3}}</td>

						</tr>

					</ng-container>

			</tbody>
		</table>
	</div>
	<div id="statDiagram" class="statDiagram" *ngIf="mode=='diagram'">
		<div echarts [options]="this.echartsOption" class="demo-chart" style="width:80rem;height:50rem;">

		</div>
	</div>
</div>

